import 'package:flutter/material.dart';
import 'package:xlsk/utils/dimension.dart';

class Tabs extends StatefulWidget {
  num width;
  List tabList = [];
  int current = 0;
  num itemWidth = 0;
  bool canMove = true;
  var callback;

  // Tabs(this.width,this.tabList,this.current,this.canMove,this.callback);

  Tabs({
    Key ?key,
    required this.width,
    required this.current,
    this.canMove = true,
    required this.tabList,
    required this.callback,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _tabsState();
  }
}

class _tabsState extends State<Tabs> with SingleTickerProviderStateMixin {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Stack(
          children: [
            ListView.builder(
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context,int index){
                return GestureDetector(
                  child: Container(
                    child: Center(
                        child: AnimatedDefaultTextStyle(
                          child: Text('${widget.tabList[index]}'),
                          style: widget.current == index?
                          TextStyle(color: Color(0xff1661FF),fontSize: Dimension(context).toPx(14),fontWeight: FontWeight.w700):
                          TextStyle(color: Color(0xff303133),fontSize: Dimension(context).toPx(14),fontWeight: FontWeight.w100),
                          duration: Duration(milliseconds: 500),
                          curve: Curves.fastOutSlowIn,
                        )
                    ),
                    width: Dimension(context).toPx(widget.itemWidth>0?widget.itemWidth:widget.width/widget.tabList.length),
                    height: Dimension(context).toPx(40),
                  ),
                  onTap: (){
                    if(widget.canMove){
                      setState(() {
                        widget.current = index;
                        widget.callback(index);
                      });
                    }
                  },
                );
              },
              itemCount: widget.tabList.length,
            ),
            AnimatedPositioned(
              child: Container(
                width: Dimension(context).toPx(16),
                height: Dimension(context).toPx(4),
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment(-1,0),
                        end: Alignment(1,0),
                        colors: [
                          Color(0xff1661ff),
                          Color.fromRGBO(22, 97, 255, 0)
                        ]
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(4)))
                ),
              ),
              bottom: 0,
              left: Dimension(context).toPx((widget.current + 0.5)*(widget.itemWidth>0?widget.itemWidth:widget.width/widget.tabList.length) - 8),
              duration: Duration(milliseconds: 500),
              curve: Curves.fastOutSlowIn,
            )
          ],
        ),
        width: Dimension(context).toPx(widget.width),
        height: Dimension(context).toPx(40),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}
